<template>
  <div ref="chart" style="width: 600px; height: 400px"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { map } from 'lodash'
import * as echarts from 'echarts'

interface Props {
  data: any
  options: any
}

const chart = ref(null)

const props = withDefaults(defineProps<Props>(), {
  data: {},
  options: {},
})

onMounted(() => {
  // 初始化ECharts实例
  const myChart = echarts.init(chart.value)
  //console.log('chart-props', props.data, props.options)
  const params = props.options.params
  const title = params.title
  const legend = { data: map(params.series, 'name') }
  //console.log('chart-legent', legend)
  const xAxis = {
    type: props.options.params.x.type,
    data: map(props.data, params.x.dataName),
  }
  const yAxis = {
    type: params.y.type,
  }
  //console.log('chart-xAxis', xAxis, yAxis)
  const series = map(params.series, ser => ({
    name: ser.name,
    type: props.options.functionName,
    data: map(props.data, ser.key),
  }))
  //console.log('chart-series', series)

  // 配置项
  const option = {
    title: {
      text: title,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend,
    xAxis,
    yAxis,
    series,
  }

  // 使用配置项绘制图表
  myChart.setOption(option)
})
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>
